<template>
  <div class="content-box">
    <nav-title title="语言能力" />
    <div class="line">
      <span class="important">*</span>
      <div class="label">语言</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="lanList" :columns="lanLength" placeholder="请选择" v-model="lan" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">证书名称</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="descr">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">获得日期</div>
      <div class="value">
        <group>
          <datetime value-text-align="left" placeholder="请选择" v-model="getDate"></datetime>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">考试分数</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="score">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">掌握程度</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="techList" :columns="techLength" placeholder="请选择" v-model="tech" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="submit-btn" @click="save">
      保存
    </div>
    <div class="remove-btn" @click="remove">
      删除
    </div>
  </div>

</template>

<script>
import { Datetime, Group, PopupPicker } from 'vux'
import { saveLan,delLan,getDicItem } from '../../../api/api'
import { json2Form } from '../../../util/http'

export default {

  name: 'input-information',
  components: {
    Datetime, Group, PopupPicker
  },
  mounted(){
    //获取字典
    this.getDic();
  },
  data() {
    return {
      lanList: [],
      lanLength: 1,
      lan: [],

      descr: '',
      getDate: '',
      score: '',

      techList: [],
      techLength: 1,
      tech: [],
    }
  },
  methods: {
    getDic(){
      //语言字典
      getDicItem({fileName: 'RS_LANG_CD'}).then(res=>{
        if(res && res.retCode === '000000'){
          for(let i=0; i<res.retData.length; i++){
            this.lanList.push({name: res.retData[i].xlatshortname,value: res.retData[i].fieldvalue});
          }
          this.lanLength = res.retData.length;
        }
      }).catch(res=>{

      });

      //掌握程度字典
      getDicItem({fileName: 'C_LANG_LV'}).then(res=>{
        if(res && res.retCode === '000000'){
          for(let i=0; i<res.retData.length; i++){
            this.techList.push({name: res.retData[i].xlatshortname,value: res.retData[i].fieldvalue});
          }
          this.techLength = res.retData.length;
        }
      }).catch(res=>{

      });
    },
    save() {

      if(this.lan.length === 0){
        this.$vux.alert.show({
          title: '警告',
          content: '请选择语言'
        });
        return;
      }

      if(this.tech.length === 0){
        this.$vux.alert.show({
          title: '警告',
          content: '请选择掌握程度'
        });
        return;
      }

      let params = {
        'rsHireId': '123456',
        'rsLangCd': this.lan,
        'cDescr': this.descr,
        'cDate': new Date(this.getDate),
        'cScore': this.score,
        'cLangLv': this.tech
      }

      saveLan(json2Form(params)).then(res => {
        const that = this;
        //成功：000000
        if(res && res.retCode === '000000' ){
          //保存成功
          this.$vux.alert.show({
            title: '奥克斯',
            content: '保存成功',
            onHide () {
              that.$router.push('/');
            }
          })

        }else{
          // 显示
          this.$vux.alert.show({
            title: '提示',
            content: res.retMsg
          })
        }
      }).catch (res=>{
        this.$vux.alert.show({
          title: '警告',
          content: '网络异常，请稍后重试'
        })
      })


    },
    remove() {

      const _this = this;

      let params = {

      };

      _this.$vux.confirm.show({
          // 组件除show外的属性
          title: '提示',
          content: '确定删除？',
          onCancel () {
          },
          onConfirm () {
            delLan(json2Form(params)).then(res=>{
              //成功：000000
              if(res && res.retCode === '000000' ){
                //删除成功
                // _this.$vux.alert.show({
                //   title: '奥克斯',
                //   content: '删除成功',
                //   onHide () {
                    _this.$router.push('/');
                //   }
                // })
              }else{
                // 显示
                _this.$vux.alert.show({
                  title: '提示',
                  content: res.retMsg
                })
              }

            })
            .catch(res=>{
              _this.$vux.alert.show({
                title: '',
                content: '网络异常，请稍后重试'
              })
            })


          }
        })
    }
  }
}
</script>
<style type="text/scss" lang="scss">
.content-box {
  padding: 0 10px;
  .important {
    width: 10px;
    color: red;
  }

  .line {
    display: flex;
    border-bottom: 1px solid #cccccc;
    line-height: 40px;
    .label {
      flex: 2;
      text-align: left;
      font-size: 14px;
    }
    .value {
      flex: 3;
      font-size: 13px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      color: #707070;
      input {
        width: 100%;
        padding-left: 15px;
      }
    }
    // .controls-box {
    //   flex: 3;
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    .select-control {
      flex: 3;
      text-align: left;
    }
    .date-control {
      flex: 3;
      text-align: left;
    }
    // .select-box {
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    // .icon {
    //   flex: 1;
    //   text-align: right;
    // }
  }

  .submit-btn {
    position: absolute;
    bottom: 35px;
    background-color: #07bc4b;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 15%;
    box-shadow: 3px 3px 5px #888888;
  }

  .remove-btn {
    position: absolute;
    bottom: 35px;
    background-color: #ff6633;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 55%;
    box-shadow: 3px 3px 5px #888888;
  }

  .title {
    font-size: 20px;
    font-weight: 900;
    color: #25262d;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}
</style>
